import React from 'react';
import { SAgTable } from 'suid-supplement';
import olympicWinnersJson from './olympic-winners.json';
import './styles.less';

const filterParams = {
  comparator: (filterLocalDateAtMidnight, cellValue) => {
    const dateAsString = cellValue;
    if (dateAsString === null) return -1;
    const dateParts = dateAsString.split('/');
    const cellDate = new Date(
      Number(dateParts[2]),
      Number(dateParts[1]) - 1,
      Number(dateParts[0]),
    );
    if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) {
      return 0;
    }
    if (cellDate < filterLocalDateAtMidnight) {
      return -1;
    }
    if (cellDate > filterLocalDateAtMidnight) {
      return 1;
    }
    return 0;
  },
};

export default () => {
  // console.log(olympicWinnersJson, 'olympicWinnersJson');
  return (
    <div
      className="ag-theme-quartz" // applying the Data Grid theme
      style={{ height: 400 }} // the Data Grid will fill the size of the parent container
    >
      <SAgTable
        rowData={olympicWinnersJson}
        columnDefs={[
          // {
          //   field: 'button',
          //   cellRenderer: CustomButtonComponent,
          // },
          {
            field: 'athlete',
            filter: true,
            // floatingFilter: true
          },
          {
            field: 'age',
            filter: 'agTextColumnFilter',
            maxWidth: 100,
            // 控制 怎么显示这个值（“值怎么展示”）
            // 不支持直接搜索
            valueFormatter: ({ value }) =>
              value > 20 ? '大于20岁' : '小于20岁',
            filterParams: {
              values: ['大于20岁', '小于20岁'],
              textMatcher: ({ value, filterText }) => {
                const label = value > 20 ? '大于20岁' : '小于20岁';
                return label === filterText;
              },
            },
          },
          {
            field: 'age',
            filter: 'agTextColumnFilter',
            maxWidth: 200,
            // 控制 取什么值 来渲染和操作（“值从哪来”）
            // 支持直接搜索 如：输入“大于20岁”就可以搜索
            valueGetter: ({ data }) =>
              data.age > 20 ? '大于20岁' : '小于20岁',
          },
          {
            field: 'age',
            filter: 'agSetColumnFilter',
            maxWidth: 200,
            // 控制 取什么值 来渲染和操作（“值从哪来”）
            // 支持直接搜索 如：输入“大于20岁”就可以搜索
            valueGetter: ({ data }) =>
              data.age > 20 ? '大于20岁' : '小于20岁',
          },
          {
            field: 'date',
            filter: 'agDateColumnFilter',
            filterParams: filterParams,
          },
          { field: 'country', filter: 'agSetColumnFilter' },
          { field: 'sport', filter: 'agMultiColumnFilter' },
          { field: 'gold', filter: 'agNumberColumnFilter' },
          { field: 'silver', filter: 'agNumberColumnFilter' },
          { field: 'bronze', filter: 'agNumberColumnFilter' },
          { field: 'total', filter: false },
        ]}
        defaultColDef={{
          flex: 1,
          minWidth: 150,
          // filter: 'agTextColumnFilter',
          // suppressHeaderMenuButton: true,
          // suppressHeaderContextMenu: true,
        }}
        pagination={true}
      />
    </div>
  );
};
